@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	outline:none;
	border:0;
	}
body{
	font-size:62.5%;
	font-family: Arial, helvetica, sans-serif;
	background:#5c90f1;
}
a{
	text-decoration:none;
}
li{
	list-style-type:none;
}
img{
	width:100%;
}
#container{
	width: 100%;
	max-width:960px;
	margin: 0 auto;
	}
/*redéfiniion de la balise header*/
#container #header{
	float:left;
	width:100%;
	height:172px;
	background: #fff;
	border:1px solid #ccc;
	display:block;
	}
#container #header #rechercher{
	float: left;
	margin-left:10px;
	margin-top:120px;
	padding:5px;
	color:#000;
}
#container #header #rechercher label{
font-size:1.2em;
}
#container #header #logo {
	float: left;
	margin-left:-160px;
	margin-top:60px;
	color:#000;
}

#container #header #titre h1{
	float: left;
	margin-left: 100px;
	color: #F00;
	font-size:2.4em;
	font-weight:normal;
	margin-top:30px;
}
#container #header #titre h2{
	float: left;
	margin-left: -220px;
	color: #F00;
	font-size:2.4em;
	font-weight:normal;
	margin-top:140px;
}
#container #header #client {
	float: right;
	margin-right:10px;
	margin-top:100px;
	color:#000;
}

/*STYLES DU FORMULAIRE*/
/*on redéfinit la balise label( identifiant et mot de passe): en leur donnant une largeur, je place les champs de texte (input) au meme niveau */
#container #header #client label{
	font-size:1.2em;
	width:80px;
	display:inline-block;
	color:#000;
	}
/*je décale le bouton ok du champ de texte correspondant à l'indentifiant*/
#container #header #client input{
	margin-right:5px;
	margin-bottom:5px;
	height:20px;
	border: 1px solid #ccc;
	}
/*STYLES DU BOUTON OK*/
/*input[type="button"]= > je sélectionne l'input qui est de type "button", donc ici le bouton ok*/
#container #header #client input[type="button"]{
	font-size:0.9em;
	padding:3px 2px;
	cursor:pointer;
	}
	/*je décale le bouton ok du champ de texte correspondant à l'indentifiant*/
#container #header #rechercher input{
	margin-right:5px;
	height:20px;
	border: 1px solid #ccc;
	}
/*STYLES DU BOUTON OK*/
/*input[type="button"]= > je sélectionne l'input qui est de type "button", donc ici le bouton ok*/
#container #header #rechercher input[type="button"]{
	font-size:0.9em;
	padding:3px 2px ;
	cursor:pointer;
	}
/*Styles du lien Mot de passe perdu*/
#container #header #client a{
	font-size:1em;
	color:#000;
	}
/*Styles du lien Mot de passe oublié au survol*/
#container #header #client a:hover{
	text-decoration:underline;
	}

/*STYLES DU MENU*/
nav {
	width:100%; 
	height:50px;
	background:#33F;
	float:left;
	}

nav ul{
	display:table;
	/*table-layout: fixed;*/
	width:100%;
}
nav  ul li{
	display:table-cell;
}
nav ul li a{
	width:100%;
	text-align:center;
	display:inline-table;
	line-height:50px;
	border: 1px solid #FFF;
	border-right: 1px solid #022777;
	border-bottom: 1px solid #022777;
	font-size:1.3em;
	color:#fff;
	font-weight:bold;
}
nav ul li:first-child a{
	border-left:0;
}
nav ul li:last-child a{
	border-right:0;
}
/*FIN STYLES DU MENU*/
#contenu{
	width:100%;
	float:left;
	background:#fff;
}
/*********STYLES DU CONTENU DE GAUCHE************/
#contentG{
	width:66%;
	padding:2%;
	float:left;
	background-color:red;
	font-size:0.9em;
	
	}

.content_G_block h1{
	font-size:1em;
}
.content_G_block h2{
	font-size:1.5em;
	clear:left;
}
.content_G_block h3{
	font-size:0.8em;
	margin-left: 30px;
	clear:left;
	display:inline;
}
.content_G_block{
	width:49%;
	/*min-width:280px;
	min-height: 300px;*/
	margin-top:3%;
	margin-right:4px;
	/*padding: 0 0 1.595% 0;*/
	background-color: #fff;
	float:left;
	border-top: 1px solid #ccc;
}
.content_G_block img {
	display:block;
	/*border-bottom: 1px solid #888;*/
}
.content_G_block a,
.content_G_block a:visited {
	/*----------------------------------------------------------------------------------------------*/
	/* global */
	/*----------------------------------------------------------------------------------------------*/
	display: block;
	float: left;
	margin: 5% 0  7% 4%;
	/*padding: 8px 14px 6px 14px;*/
	text-align: left;
	color: #000;
	font-size:1.2em;
	font-style:italic;
	/*border-bottom: 1px solid #9a9a9a;*/
}
nav ul li a,
nav ul li a:visited,
.content_G_block a,
.content_G_block a:visited {

	color:#000;
}
.content_G_block a:active {
	
}

nav ul li a:hover,
.content_G_block a:hover,
.content_G_block a:active {
	
	
}
nav ul li a,
nav ul li a:hover,
nav ul li a:active,
nav ul li a:visited {
	color:#000;
	
}
#contentG p {
	width:92%;
	/*padding:1%;*/
	padding:4%;
	background:#fff;
	clear:both;
}

/*********STYLES DU CONTENU DE RUBRIQUE************/
#contentR{
	width:66%;
	padding:2%;
	float:left;
	background-color:red;
	font-size:0.9em;
	border-top:1px solid #ccc;
	
	}

.content_R_block h1{
	font-size:1em;
}
.content_R_block h2{
	font-size:1.5em;
	clear:left;
}
.content_R_block h3{
	font-size:0.8em;
	margin-left: 30px;
	clear:left;
	display:inline;
}
.content_R_block{
	width:49%;
	/*min-width:280px;
	min-height: 300px;*/
	margin-top:3%;
	margin-right:4px;
	/*padding: 0 0 1.595% 0;*/
	background-color: #fff;
	float:left;
	border-top: 1px solid #ccc;
}
/*********STYLES DU CONTENU UN ARTICLE************/
#contentAR{
	width:66%;
	padding:2%;
	float:left;
	background-color:#fff;
	font-size:1.5em;
	border-top:1px solid #ccc;
	margin-top:4%;
	color:#000;
	}

#contentAR h1{
	font-size:1em;
}
#contentAR h2{
	font-size:1.5em;
	clear:left;
}
#contentAR h3{
	font-size:0.8em;
	margin-left: 30px;
	clear:left;
	display:inline;
}
#contentAD{
	width:25%;
	padding:2%;
	float:right;
	margin-right:2px;
	background:#ccc;
	margin-top:37px
	}
#contentAD h2{
	font-size:1.2em;
}

.content_R_block img {
	display:block;
	/*border-bottom: 1px solid #888;*/
}
.content_R_block a,
.content_R_block a:visited {
	/*----------------------------------------------------------------------------------------------*/
	/* global */
	/*----------------------------------------------------------------------------------------------*/
	display: block;
	float: left;
	margin: 5% 0  7% 4%;
	/*padding: 8px 14px 6px 14px;*/
	text-align: left;
	color: #000;
	font-size:1.2em;
	font-style:italic;
	/*border-bottom: 1px solid #9a9a9a;*/
}
nav ul li a,
nav ul li a:visited,
.content_G_block a,
.content_G_block a:visited {

	color:#000;
}
.content_G_block a:active {
	
}

nav ul li a:hover,
.content_G_block a:hover,
.content_G_block a:active {
	
	
}
nav ul li a,
nav ul li a:hover,
nav ul li a:active,
nav ul li a:visited {
	color:#000;
	
}
#contentR p {
	width:92%;
	/*padding:1%;*/
	padding:4%;
	background:#fff;
	clear:both;
}
/*********STYLES DU CONTENU DE DROITE************/

#contentD{
	width:25%;
	padding:2%;
	float:right;
	margin-right:2px;
	background:#ccc;
	margin-top:37px
	}
#contentD p{
	padding:4%;
	width:92%;
	margin:0 0 6% 0;
	
}

#contentD h1 {
	font-size:1.5em;
}
#contentD h2{
	font-size:0.9em;
}
/***********STYLES FOOTER*********/

footer {
	float:left;
	width:98.8%;
	text-align:center;
	/*margin-top:10px;*/
	/*background:#4388CC;*/
	padding:5px;
	border:1px solid #ccc;
}
footer ul li{
	display:inline;
	color:#000;
	font-size:1.2em;
}
footer ul li a{
	color:#000;
	font-size:1.2em;
	padding:5px;
}
footer ul li a:hover{
	color:#663366;
	text-decoration:underline;/*pour souligner le lien au survol*/
}
footer #multimedia{
	height: 150px;
	background:#000;
	border:1px solid #fff;
	width:100%;
}
footer.video{
	width:30px;
	height:30px;
	background:#000;
	float:left;
	border: 1px solid #fff;
}

/*********************STYLES TABLETTES***************************************/
@media screen and (max-width:1024px) {
body{
	background-color:#ba5cf1;
	}
  #container{
	width: 100%;
	margin: 0 auto;
	}
	header{
		background: #631b88;
		}
	header #contexte_02{
	display:block;
	
	}
header #contexte_01, header #contexte_03{
	display:none;
	}
nav {
		background-color:#C90;
		}
#contentG{
	width:30%;
	
	padding:1%;
	float: left;
	}
	
.content_G_block{
	width:98%;
	margin-left:1%;
	margin-right:1%;
	/*min-height: 300px;*/
	text-align: justify;
}
#contentR{
	width:30%;
	
	padding:1%;
	float: left;
	}
	
.content_R_block{
	width:98%;
	margin-left:1%;
	margin-right:1%;
	/*min-height: 300px;*/
	text-align: justify;
}
#contentD{
	width:30%;
	padding:2.5%;
	}
#contentAR{
	width:60%;
	
	padding:1%;
	float: left;
	}
	#contentAD{
	width:30%;
	padding:2.5%;
	}

/*----------------------------------------------------------------------------------------------*/
/* liens et dégradés */
/*----------------------------------------------------------------------------------------------*/	
nav ul li a,
nav ul li a:visited,
.content_G_block a,
.content_G_block a:visited {
	/*----------------------------------------------------------------------------------------------*/
	/* box gradient */
	/*----------------------------------------------------------------------------------------------*/	
	/* Fallback */
	background-color:#c470f3;
	/* Old browsers */
	background: #c470f3;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, #c470f3 0%, #631b88 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c470f3), color-stop(100%,#631b88));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, #c470f3 0%,#631b88 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #c470f3 0%,#631b88 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, #c470f3 0%,#631b88 100%);
	/* W3C */
	background: linear-gradient(to bottom, #c470f3 0%,#631b88 100%);
	
}

nav ul li a:hover,
.content_G_block a:hover,
.content_G_block a:active {
	/*----------------------------------------------------------------------------------------------*/
	/* box gradient */
	/*----------------------------------------------------------------------------------------------*/	
	/* Fallback */
	background-color:#ba5cf1;
	/* Old browsers */
	background: #ba5cf1;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, #ba5cf1 0%, #4d0277 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ba5cf1), color-stop(100%,#4d0277));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, #ba5cf1 0%,#4d0277 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #ba5cf1 0%,#4d0277 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, #ba5cf1 0%,#4d0277 100%);
	/* W3C */
	background: linear-gradient(to bottom, #ba5cf1 0%,#4d0277 100%);

}
}
/*********************STYLES SMARTPHONE***************************************/
@media screen and (max-width:480px) {
body{
	background-color:#5cf1ba;
}
#container{
	width: 100%;
	max-width: 480px;
	min-width:320px;
	margin: 0 auto;
	overflow:hidden;
	}
header{
		background:#1b8863;
		}
/*header #xxxx{
	display:block;
	
	}
header xxx , header xxxx{
	display:none;
	}*/
/*----------------------------------------------------------------------------------------------*/
/* navigation */
/*----------------------------------------------------------------------------------------------*/	
nav {
	height:auto;
	background-color:#0CC;
}
nav ul li {
	display: block;
}
nav ul li a {
	float:left;
	clear:both;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid #1b8863;
}
nav ul li a,
nav ul li a:visited,
.content_G_block a,
.content_G_block a:visited {
	
	/*----------------------------------------------------------------------------------------------*/
	/* box gradient */
	/*----------------------------------------------------------------------------------------------*/	
	/* Fallback */
	background-color:#70f3c4;
	/* Old browsers */
	background: #70f3c4;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, #70f3c4 0%, #1b8863 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70f3c4), color-stop(100%,#1b8863));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, #70f3c4 0%,#1b8863 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #70f3c4 0%,#1b8863 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, #70f3c4 0%,#1b8863 100%);
	/* W3C */
	background: linear-gradient(to bottom, #70f3c4 0%,#1b8863 100%);
	
}

nav ul li a:hover,
nav ul li a:active,
.content_G_block a:hover,
.content_G_block a:active {
	/*----------------------------------------------------------------------------------------------*/
	/* box gradient */
	/*----------------------------------------------------------------------------------------------*/	
	/* Fallback */
	background-color:#5cf1ba;
	/* Old browsers */
	background: #5cf1ba;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, #5cf1ba 0%, #02774d 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5cf1ba), color-stop(100%,#02774d));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, #5cf1ba 0%,#02774d 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #5cf1ba 0%,#02774d 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, #5cf1ba 0%,#02774d 100%);
	/* W3C */
	background: linear-gradient(to bottom, #5cf1ba 0%,#02774d 100%);
	
}
#contentG{
	width:100%;
	padding-left:inherit;
}
.content_G_block{
	width:90%;
	margin:5%;
	/*min-height: 300px;*/
	
	
	
}
#contentR{
	width:100%;
	padding-left:inherit;
}
.content_R_block{
	width:90%;
	margin:5%;
	/*min-height: 300px;*/
	
	
	
}
#contentD{
	width:98%;
	margin:5px;
	
}
#contentAR{
	width:100%;
	padding-left:inherit;
}
#contentAD{
	width:98%;
	margin:5px;

footer{
	width:90%;
	margin:5%;

}
